<template>
  <view class="goodsReleased-view">
    <view class="goods-name-ipt">
      <view class="name">
        {{ $t("goodsReleased.tradeName") }}
      </view>
      <input class="goods-name-sty" v-model="queryParams.commodity" type="text"
             :placeholder="$t('goodsReleased.hint.goods')" placeholder-style="color:#858585;font-size: 25rpx">
    </view>
    <view class="goods-name-ipt">
      <view class="name">
        {{ $t("goodsReleased.tradeNameEn") }}
      </view>
      <input class="goods-name-sty" v-model="queryParams.commodityEn" type="text"
             :placeholder="$t('goodsReleased.hint.goodsEn')" placeholder-style="color:#858585;font-size: 25rpx">
    </view>
    <view class="goods-name">
      <view class="name">
        {{ $t("goodsReleased.brand") }}
      </view>
      <view :class="!brand?'wselect-brand':'select-brand'" @tap="selectBrand">
        {{ !brand ? $t('goodsReleased.hint.brand') : brand.newBrandName }}
      </view>
    </view>

    <view class="sort-desc" v-if="goodsSort.length > 0">
      <view class="name">
        {{ $t("goodsReleased.category") }}
      </view>
      <view class="sort-list" v-if="selectAcc.isSelect">
        <view class="sort-item" @tap="selectSort(item)" v-for="item in goodsSort" :key="item.id"
              v-if="goodsSort.length > 0">
          <!-- <image src="../../static/icon/bag.png" mode=""></image> -->
          <view class="img-desc">
            {{ $t("goodsReleased.language") == "zh" ? item.brandName : item.brandEngName }}
          </view>
        </view>
      </view>

      <view class="select-acc" @tap="reSelectSort" v-else>
        {{ selectAcc.name }}
      </view>
    </view>

    <view class="options-list" v-if="!selectAcc.isSelect">
      <view class="options" v-if="item.optionsList[0].length > 0 && item.brandName != '所在地'"
            v-for="(item, index) in options" :key="index">
        <!-- {{item}} -->
        <view class="name">
          <view class="name-title">
            {{ $t("goodsReleased.language") == "zh" ? item.brandName : item.brandEngName ? item.brandEngName : item.brandName }}
          </view>
          <!-- <u-icon v-if="item.id == 12" @tap="popShow=true" name="question-circle-fill" size="16"></u-icon> -->
        </view>
        <view :class="item.selName == '请选择' || item.selName == 'Please select' ? 'wsel':'sel'"
              @tap="selectShow(index)">
          {{ item.selName }}
        </view>
        <u-picker :show="item.show" ref="uPicker" :columns="item.optionsList"
                  @confirm="confirm(index, item.idItemList, $event)" @cancel="cancel(index)" @close="close(index)"
                  closeOnClickOverlay></u-picker>
      </view>
      <!-- <view class="options">
        <view class="name">
          {{$t("goodsReleased.freight")}}
        </view>
        <view class="sel" @tap="selectFreight">
          {{selName}}
        </view>
        <u-picker :show="fShow" ref="uPicker" :columns="freightList"
          @confirm="confirmFreight" @cancel="fShow = false" @close="fShow = false"
          closeOnClickOverlay></u-picker>
      </view> -->
      <view class="options">
        <view class="name">
          {{ $t("goodsReleased.region") }}
        </view>
        <view :class="regionName == '请选择' || regionName == 'Please select' ? 'wsel':'sel'" @tap="selectRegions">
          {{ regionName }}
        </view>
        <u-picker :show="rShow" ref="uPicker" :columns="regionList" @confirm="confirmRegions"
                  @cancel="rShow = false" @close="rShow = false" closeOnClickOverlay></u-picker>
      </view>

      <view class="options">
        <view class="name">
          {{ $t("goodsReleased.contain") }}
        </view>
        <u-checkbox-group
            v-model="checked"
            iconPlacement="right"
            placement="row"
            @change="checkboxChange"
        >
          <u-checkbox
              v-for="(item, index) in checkedList"
              :key="item.id"
              activeColor="#000"
              :label="$t('language') == 'zh'?item.brandName:item.brandEngName"
              :name="item.id"
              :disabled="disabled && item.id !== 266"
          ></u-checkbox>
        </u-checkbox-group>
      </view>
    </view>

    <view class="size">
      <view class="name">
        {{ $t("goodsReleased.dimensions") }}({{ $t("goodsReleased.company") }}cm)
      </view>

      <view class="ipt-size">
        <view class="long">
          <view class="name">
            {{ $t("goodsReleased.length") }}
          </view>
          <input type="number" :placeholder="$t('goodsReleased.hint.length')" v-model="size.long">
        </view>

        <view class="high">
          <view class="name">
            {{ $t("goodsReleased.height") }}
          </view>
          <input type="number" :placeholder="$t('goodsReleased.hint.height')" v-model="size.high">
        </view>
        <view class="wide">
          <view class="name">
            {{ $t("goodsReleased.width") }}
          </view>
          <input type="number" :placeholder="$t('goodsReleased.hint.width')" v-model="size.wide">
        </view>
      </view>
    </view>

    <view class="date-options">
      <view class="date-name">
        {{ $t("goodsReleased.year") }}
      </view>
      <view :class="yearName == '请选择' || yearName == 'Please select'?'wdate-sel':'date-sel'" @tap="yearShowFn">
        {{ yearName }}
      </view>
      <u-picker :show="Yshow" :columns="yearList" @confirm="confirmYear" @cancel="Yshow=false" @close="Yshow=false"
                closeOnClickOverlay>
      </u-picker>
    </view>

    <view class="date-options">
      <view class="date-name">
        {{ $t("goodsReleased.auctionTimeLimit") }}
      </view>
      <view :class="dateName == '请选择' || dateName == 'Please select'?'wdate-sel':'date-sel'" @tap="dateShowFn">
        {{ dateName }}
      </view>
      <u-picker :show="dateShow" :columns="dateList" @confirm="confirmDate" @cancel="dateShow=false"
                @close="dateShow=false" closeOnClickOverlay></u-picker>
    </view>

    <u-radio-group v-model="radiovalue1" placement="row">
      <u-radio labelSize="16" activeColor="#000" v-for="(item, index) in radiolist1" :key="index"
               :label="item.name" :name="item.id" @change="radioChange">
      </u-radio>
    </u-radio-group>

    <view class="img-list temp-class" v-if="radiovalue1 == 1">
      <view class="img-item" v-if="imgInvoice.length > 0" v-for="(item,index) in imgInvoice" :key="item">
        <image :src="item" mode="aspectFit"></image>
        <view class="del" @tap="delImg2(index)" v-if="item">
          <u-icon name="close-circle-fill" size="28"></u-icon>
        </view>
      </view>
    </view>

    <u-upload v-if="radiovalue1 == 1" :fileList="fileList2" @afterRead="afterRead2" name="1" multiple :maxCount="1">
      <view class="upload-img2" style="flex: 1;">
        {{ $t("goodsReleased.uploadInvoice") }}
      </view>
    </u-upload>

    <!-- 	<view class="goods-price" v-if="radiovalue1 == 1" :class="{active: radiovalue1 == 1}">
        <view class="name">
          {{$t("goodsReleased.originalPrice")}}
        </view>
        <input class="goods-price-sty" v-model="originalPrice" type="text"
          :placeholder="$t('goodsReleased.hint.originalPrice')"
          placeholder-style="color:#FF0000;font-size: 20rpx">
        <view class="sym">
          $
        </view>
      </view> -->
    <!-- v-if="radiovalue1 == 1" -->
    <view class="goods-price" :class="{active: radiovalue1 == 1}">
      <view class="name">
        {{ $t("goodsReleased.amountOfMoney") }}
      </view>
      <input class="goods-price-sty" v-model="money" type="text" :placeholder="$t('goodsReleased.hint.money')"
             placeholder-style="color:#FF0000;font-size: 20rpx">
      <view class="sym">
        $
      </view>
    </view>
    <view class="options-list" v-if="!selectAcc.isSelect">
      <view class="options" v-if="item.optionsList[0].length > 0 && item.brandName == '所在地'"
            v-for="(item, index) in options" :key="index">
        <!-- {{item}} -->
        <view class="name">
          <view class="name-title">
            {{ $t("goodsReleased.language") == "zh" ? item.brandName : item.brandEngName ? item.brandEngName : item.brandName }}
          </view>
          <!-- <u-icon v-if="item.id == 12" @tap="popShow=true" name="question-circle-fill" size="16"></u-icon> -->
        </view>
        <view :class="item.selName == '请选择' || item.selName == 'Please select' ? 'wsel':'sel'"
              @tap="selectShow(index)">
          {{ item.selName }}
        </view>
        <u-picker :show="item.show" ref="uPicker" :columns="item.optionsList"
                  @confirm="confirm(index, item.idItemList, $event)" @cancel="cancel(index)" @close="close(index)"
                  closeOnClickOverlay></u-picker>
      </view>
    </view>
    <view class="options-list">
      <view class="options">
        <view class="name">
          <view class="name-title">
            {{ $t('goodsReleased.hint.chineseDesc') }}
          </view>
        </view>
      </view>
    </view>
    <view class="goods-desc">

			<textarea v-model="queryParams.shopDescribe" name="" id="" cols="30" rows="10"
                :placeholder="$t('goodsReleased.hint.desc')"></textarea>
    </view>
    <view class="options-list">
      <view class="options">
        <view class="name">
          <view class="name-title">
            {{ $t('goodsReleased.hint.englishDesc') }}
          </view>
        </view>
      </view>
    </view>
    <view class="goods-desc">
			<textarea v-model="queryParams.shopDescribeEn" name="" id="" cols="30" rows="10"
                :placeholder="$t('goodsReleased.hint.desc')"></textarea>
    </view>

    <!-- 		<view class="img-list">
          <view class="img-item" v-if="imgList.length > 0" v-for="(item,index) in imgList" :key="item">
            <image :src="item" mode="aspectFit"></image>
            <view class="del" @tap="delImg(index)" v-if="item">
              <u-icon name="close-circle-fill" size="28"></u-icon>
            </view>
          </view>
        </view> -->
    <!-- 上传动画 -->

    <shmily-drag-image v-if="imgList.length" v-model="imgList"   :number="28" :delImage="delImage"></shmily-drag-image>
    <u-upload v-if="imgNum < 28&&uploadAnimation==false" :fileList="fileList1" @afterRead="afterRead" name="1" multiple
              :maxCount="28-imgNum">
      <view class="upload-img" style="flex: 1;">
        {{ $t("goodsReleased.uploadPictures") }}
      </view>
    </u-upload>

    <u-loading-icon v-if="uploadAnimation==true"></u-loading-icon>
    <u-notify ref="uNotify"></u-notify>
    <view class="footer-btn">
      <!-- <view class="cancel-btn common-btn">
        {{$t("goodsReleased.cancel")}}
      </view> -->

      <view class="release-btn common-btn" @tap="publishGoods">
        {{ $t("goodsReleased.release") }}
      </view>
    </view>

    <u-popup mode="center" :show="popShow" @close="popShow=false" @open="popOpen">
      <image class="pop-img" v-if="seriesUrl" :src="seriesUrl" mode=""></image>
      <!-- <image class="pop-img" v-else src="../../static/icon/bag.png" mode=""></image> -->
      <view class="pop-desc" v-else>
        {{ $t("goodsReleased.noImg") }}
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  getSort,
  createPublishGoods,
  getFreight,
  getRegionsNew
} from "@/common/api.js"

import {
  API_URL
} from '@/env'

export default {

  watch: {
    money: {
      handler() {
        // console.log(123);
        const test = String(this.money).split(",");
        console.log(test.join(""));
        const reg = new RegExp("^[0-9]*\.?");
        // console.log(reg.test(this.money));
        if (!reg.test(test.join(""))) {
          setTimeout(() => {
            this.money = "";
          }, 0);
        }

        if (this.money.split(".")[1] && this.money.split(".")[1].length > 2) {
          setTimeout(() => {
            this.money = "";
          }, 0);
        }

        setTimeout(() => {
          const temp = String(this.money).split(",");
          const temp1 = temp.join("");
          const temp2 = temp1.split(".");
          // console.log(temp2);
          if (temp2[1] || temp2[1] == "") {
            this.money = String(temp2[0]).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." + temp2[1];
          } else {
            this.money = String(temp2[0]).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
          }
        }, 0);
      },
      deep: true
    },
    originalPrice: {
      handler() {
        // console.log(123);
        const test = String(this.originalPrice).split(",");
        console.log(test.join(""));
        const reg = new RegExp("^[0-9]*\.?");
        // console.log(reg.test(this.money));
        if (!reg.test(test.join(""))) {
          setTimeout(() => {
            this.originalPrice = "";
          }, 0);
        }

        if (this.originalPrice.split(".")[1] && this.originalPrice.split(".")[1].length > 2) {
          setTimeout(() => {
            this.originalPrice = "";
          }, 0);
        }

        setTimeout(() => {
          const temp = String(this.originalPrice).split(",");
          const temp1 = temp.join("");
          const temp2 = temp1.split(".");
          // console.log(temp2);
          if (temp2[1] || temp2[1] == "") {
            this.originalPrice = String(temp2[0]).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." +
                temp2[1];
          } else {
            this.originalPrice = String(temp2[0]).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
          }
        }, 0);
      },
      deep: true
    }
  },
  data() {
    return {
      Errorupload: false,
      uploadAnimation: false,
      checked: [],
      checkedList: [],
      disabled: false,
      imgInvoice: [],
      // 基本案列数据
      radiolist1: [{
        name: this.$t("goodsReleased.newGoods"),
        id: 1
      },
        {
          name: this.$t("goodsReleased.oldGoods"),
          id: 2
        },
      ],
      startYear: 315504000000,
      endYear: new Date().valueOf(),
      value5: Number(new Date()),
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      radiovalue1: 1,
      money: "",
      seriesUrl: "",
      Yshow: false,
      originalPrice: "",
      isDisabled: false,
      dateList: [
        [this.$t("goodsReleased.date1"), this.$t("goodsReleased.date2"), this.$t("goodsReleased.date3"),
          this.$t("goodsReleased.date4")
        ]
      ],
      yearList: [
        []
      ],
      popShow: false,
      brand: "",
      wish: null,
      options: [],
      fileList1: [],
      fileList2: [],
      imgList: [],
      goodsSort: [],
      selectAcc: {
        name: "",
        isSelect: true
      },
      size: {
        long: "",
        wide: "",
        high: ""
      },
      dateShow: false,
      dateName: this.$t('goodsReleased.hint.time'),
      yearName: this.$t('goodsReleased.hint.year'),
      minDate: new Date().valueOf(),
      dateValue: Number(new Date()),
      queryParams: {
        classificationId: "",
        measurement: "",
        auctionTime: "",
        shopDescribe: "",
        shopDescribeEn: "",
        money: "",
        productionTime: "",
        commodity: "",
        commodityEn: "",
        // freightId: "",
        imgs: [],
        originalPrice: "",

        standby4: "",
        status: 1,
        include: ""
      },
      idList: [],
      imgNum: 0,
      fShow: false,
      selName: this.$t('goodsReleased.hint.time'),
      freightList: [
        []
      ],
      freightIdList: [],
      rShow: false,
      regionName: this.$t('goodsReleased.hint.regionName'),
      regionList: [
        []
      ],
      regionIdList: [],
      regionId: null,
      isClick: true
    }
  },
  methods: {

    // 改变包含
    checkboxChange(n) {
      console.log('change', n, this.checked);
      // 266无任何附件
      if (n.includes(266)) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
    // 按钮改变
    radioChange(obj) {
      console.log(obj);
    },
    confirmDate(e) {
      console.log(e);
      this.dateName = e.value[0];
      let date = new Date();
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      let d = date.getDate();
      if (e.indexs[0] == 0) {
        MM += 1;
        if (MM > 12) {
          MM -= 12;
          y += 1;
        }
      }
      if (e.indexs[0] == 1) {
        MM += 2;
        if (MM > 12) {
          MM -= 12;
          y += 1;
        }
      }
      if (e.indexs[0] == 2) {
        MM += 3;
        if (MM > 12) {
          MM -= 12;
          y += 1;
        }
      }
      if (e.indexs[0] == 3) {
        MM += 6;
        if (MM > 12) {
          MM -= 12;
          y += 1;
        }
      }
      MM = MM < 10 ? ('0' + MM) : MM;
      d = d < 10 ? ('0' + d) : d;
      this.dateName = y + '-' + MM + '-' + d;
      this.dateShow = false;
    },
    popOpen() {
    },
    async initFreight() {
      const res = await getFreight();
      console.log(res);
      res.rows.forEach(item => {
        // if (this.$t("language") == "zh") {
        this.freightList[0].push(item.name);
        // }
        this.freightIdList.push(item.id);
      });
    },
    confirmFreight(e) {
      this.selName = e.value[0]
      this.fShow = false;
      this.queryParams.freightId = this.freightIdList[e.indexs[0]];
    },
    selectFreight() {
      this.fShow = true;
    },
    dateChange() {
      console.log(this.dateValue);
    },
    dateConfirm(e) {
      let date = new Date(e.value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let m = date.getMinutes();
      let s = date.getSeconds();
      MM = MM < 10 ? ('0' + MM) : MM;
      d = d < 10 ? ('0' + d) : d;
      h = h < 10 ? ('0' + h) : h;
      m = m < 10 ? ('0' + m) : m;
      s = s < 10 ? ('0' + s) : s;
      this.dateName = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      this.dateShow = false;
    },
    dateClose() {
      this.dateShow = false;
    },
    yearShowFn() {
      this.Yshow = true;
    },
    dateShowFn() {
      this.dateShow = true;
    },
    async publishGoods() {

      if (this.$t("goodsReleased.language") == 'zh') {

        if (!this.queryParams.commodity) {
          this.showHint(this.$t("goodsReleased.releasedHint.goods"));
          return
        }
      } else {
        if (!this.queryParams.commodityEn) {
          this.showHint(this.$t("goodsReleased.releasedHint.goodsEn"));
          return
        }
      }


      if (!this.brand) {
        this.showHint(this.$t("goodsReleased.releasedHint.brand"));
        return
      }

      // id列表为空 没选择完毕 不可发布
      // const isSel = this.idList.every((item, index) => {
      // 	return item !== "";
      // });
      const idCheck = this.idList.filter(item => item);
      const itemCheck = this.options.filter(item => item.idItemList.length > 0);
      // console.log(isSel, this.idList.length > 0);
      if (idCheck == itemCheck && this.idList.length > 0) {
        this.showHint(this.$t("goodsReleased.releasedHint.categoryAll"));
        return
      }

      if (!String(this.queryParams.classificationId).split(",")[1]) {
        this.showHint(this.$t("goodsReleased.releasedHint.category"));
        return
      }

      const tempValue = this.queryParams.classificationId.split(",");
      this.queryParams.classificationId = tempValue[0] + "," + tempValue[1];
      this.queryParams.classificationId += "," + this.idList.join(",");
      this.queryParams.measurement = "";
      // if (this.selName == this.$t('goodsReleased.hint.time')) {
      // 	this.showHint(this.$t("goodsReleased.releasedHint.freight"));
      // 	return
      // }

      if (this.checked.length <= 0) {
        this.showHint(this.$t("goodsReleased.releasedHint.contain"));
        return
      }

      if (this.checked.includes(266)) {
        this.queryParams.include = 266;
      } else {
        this.queryParams.include = this.checked.join(",");
      }

      for (let key in this.size) {
        if (!this.size[key]) {
          this.showHint(this.$t("goodsReleased.releasedHint.size"));
          return
        }


        this.queryParams.measurement = this.size.long + "cm*" + this.size.high + "cm*" + this.size.wide + "cm";
      }
      // this.queryParams.measurement = this.queryParams.measurement.substr(0, this.queryParams.measurement
      // 	.length - 1);

      if (this.yearName == this.$t('goodsReleased.hint.year')) {
        this.showHint(this.$t("goodsReleased.releasedHint.year"));
        return
      }

      if (this.yearName == 'NIL') {
        this.queryParams.productionTime = '1979'
      } else {
        this.queryParams.productionTime = this.yearName;
      }


      if (this.dateName == this.$t('goodsReleased.hint.time')) {
        this.showHint(this.$t("goodsReleased.releasedHint.time"));
        return
      }

      this.queryParams.auctionTime = this.dateName;

      if (!this.regionId) {
        this.showHint(this.$t("goodsReleased.releasedHint.region"));
        return
      }

      this.queryParams.classificationId += "," + this.regionId;

      // if (!this.originalPrice) {
      // 	this.showHint(this.$t("goodsReleased.releasedHint.originalPrice"));
      // 	return
      // }

      // const tempOriginalPriceList = String(this.originalPrice).split(",");
      // this.queryParams.originalPrice = tempOriginalPriceList.join("");
      if (this.radiovalue1 == 1 && !this.queryParams.standby4) {
        this.showHint(this.$t("goodsReleased.releasedHint.invoice"));
        return
      }

      if (this.radiovalue1 == 2) {
        this.queryParams.standby4 = "";
      }

      if (!this.money) {
        this.showHint(this.$t("goodsReleased.releasedHint.money"));
        return
      }

      const tempMoneyList = String(this.money).split(",");
      this.queryParams.money = tempMoneyList.join("");
      console.log(this.queryParams.money, this.queryParams.originalPrice);
      // if (Number(this.queryParams.money) > Number(this.queryParams.originalPrice)) {
      // 	this.showHint(this.$t("goodsReleased.releasedHint.greater"));
      // 	return
      // }
      // 描述
      if (this.$t("goodsReleased.language") == 'zh') {

        if (!this.queryParams.shopDescribe) {
          this.showHint(this.$t("goodsReleased.releasedHint.desc"));
          return
        }
      } else {
        if (!this.queryParams.shopDescribeEn) {
          this.showHint(this.$t("goodsReleased.releasedHint.desc"));
          return
        }
      }


      if (this.imgList.length > 0) {
        this.queryParams.imgs = this.imgList
      }

      if (this.imgList.length <= 0) {
        this.showHint(this.$t("goodsReleased.releasedHint.imgUpload"));
        return
      }

      if (this.wish && this.wish != "null") {
        this.queryParams.status = 11;
        this.queryParams.colour = this.wish;
      }

      const {
        imgs,
        ...moreBagCommodityPublish
      } = this.queryParams;
      const data = {
        moreBagCommodityPublish,
        imgs
      }
      // return
      if (this.isClick) {
        this.isClick = false;
        const res = await createPublishGoods(data);
        if (res.code == 200) {

          uni.showToast({
            icon: 'success',
            title: this.$t("goodsReleased.releasedHint.success"),
            duration: 1500
          })
          setTimeout(() => {
            this.isClick = true;
            uni.redirectTo({
            	url: "/pages/goodsPublish/goodsPublish"
            })
            uni.navigateBack();
          }, 1500)
        }
        console.log(res);
      }
    },
    showHint(msg) {
      uni.showToast({
        icon: 'none',
        title: msg,
        duration: 980,
        mask: true
      })
    },
    // 删除图片
    delImage(done) {
      done();
      // this.imgList.splice(index, 1);
      // this.queryParams.imgs.splice(index, 1);
      this.imgNum--;
      console.log(111,this.imgList)
    },
    // 删除图片
    delImg2(index) {
      this.imgInvoice.splice(index, 1);
      this.queryParams.imgInvoice = "";
      this.imgNum2--;
    },
    // 新增图片
    afterRead(event) {
      this.uploadAnimation = true
      console.log(event.file, "11111");
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      for (let i = 0; i < lists.length; i++) {
        const result = this.uploadFilePromise(lists[i].url)
        result.then((res) => {
              this.imgList.push(res.msg);
              this.queryParams.imgs.push(res.msg);
              this.imgNum++;
              this.uploadAnimation = false
              console.log(111,this.imgList)

            })
            .catch((res) => {
              this.$refs.uNotify.show({
                top: 10,
                type: 'error',
                color: '#e8e8e8',
                bgColor: '#000',
                message: this.$t("my.errorupload"),
                duration: 1000 * 3,
                fontSize: 20,
                safeAreaInsetTop: true
              })
              this.uploadAnimation = false
            })
      }
    },
    // 新增图片
    afterRead2(event) {
      console.log(this.imgInvoice);
      if (this.imgInvoice.length >= 1) {
        uni.showToast({
          icon: 'none',
          title: this.$t("goodsReleased.oneImg"),
          duration: 1200
        })
        return
      }
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      // this.imgNum += lists.length;
      console.log(this.imgNum2);
      for (let i = 0; i < lists.length; i++) {
        const result = this.uploadFilePromise(lists[i].url)
        result
            .then((res) => {
              this.imgInvoice.push(res.msg);
              this.queryParams.standby4 = res.msg;
              this.imgNum2++;
            })
            .catch((res) => {
              this.$refs.uNotify.show({
                top: 10,
                type: 'error',
                color: '#e8e8e8',
                bgColor: '#000',
                message: this.$t("my.errorupload"),
                duration: 1000 * 3,
                fontSize: 20,
                safeAreaInsetTop: true
              })
              console.log(res);
            })
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        // let token = uni.getStorageSync('token')
        // console.log(token);
        let a = uni.uploadFile({
          url: API_URL + '/oss/upload', // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'file',
          timeout: 50000,
          header: {
            // 'Authorization': token
          },
          success: (res) => {
            const data = JSON.parse(res.data)
            resolve(data)
          },
          fail: (res) => {
            setTimeout(() => {
              reject(res)
            }, 1000)
          },
        });
      })
    },
    // 确认
    confirm(index, idItemList, e) {
      this.options[index].show = false;
      const {
        value,
        indexs
      } = e;
      // console.log(value.replaceAll("\"", ""));
      const idIndex = indexs[0];
      this.options[index]["selName"] = value[0];
      this.idList[index] = idItemList[idIndex];
      console.log(this.idList, index);
    },
    // 取消
    cancel(index) {
      this.options[index].show = false;
    },
    // 关闭
    close(index) {
      this.options[index].show = false;
    },
    selectBrand() {
      // console.log(123);
      uni.redirectTo({
        url: `/pages/selectBrand/selectBrand?goodsName=${this.queryParams.commodity}&url=goodsReleased&wish=${this.wish}&commodityEn=${this.queryParams.commodityEn}`
      })
    },
    async getCategory() {
      const res = await getSort(this.brand.id);
      console.log(this.brand.id);
      //筛选品牌ID可用的种类
      // this.goodsSort = res.data.filter(item=> item.brands == '' || item.brands == null || item.brands == this.brand.id);
      this.goodsSort = res.data;
      const item = this.goodsSort.filter(item => item.brandName == "包袋");
      if (item) this.selectSort(item[0]);
    },
    // 匹配u-picker需求数据
    selectSort(item) {
      this.queryParams.classificationId += "," + item.id;
      // console.log(this.queryParams);
      this.selectAcc.name = this.$t('language') == "zh" ? item.brandName : item.brandEngName;
      this.selectAcc.isSelect = false;
      this.options = item.children;
      let optionList = [];
      let idItemList = [];
      this.idList = [];
      let delIndex = null;
      const tempIndex = this.options.findIndex(item => item.brandName === "附加配件")
      if (tempIndex !== -1) {
        const tempObj = this.options.splice(tempIndex, 1);
        this.checkedList = tempObj[0].children;
      }
      var peijianlist = []
      this.checkedList.forEach((items, indexs, arrs) => {
        if (items.brands == this.brand.id || items.brands == "308") {
          peijianlist.push(items);

        }
      });
      this.checkedList = peijianlist
      // 过滤配件
      console.log(this.checkedList, "this.checkedList ")
      // console.log(item.children[0].children[0]);
      for (let i = 0; i < this.options.length; i++) {
        optionList = [];
        idItemList = [];
        // if(this.options[i].brandName === "包含") {
        // 	continue
        // }
        if (this.options[i].children.length > 0) {
          // console.log(this.brand.id, this.options[i].children);
          if (this.options[i].id == 12) {
            this.seriesUrl = this.options[i].url;
            if (!(this.options[i].children.filter(item => item.brands == this.brand.id).length == 0)) {
              this.idList.push("");
            } else {
              delIndex = i;
              continue
            }
          } else {
            this.idList.push("");
          }
        }
        for (let j = 0; j < this.options[i].children.length; j++) {
          // console.log(this.options[i].children[j].brands, this.brand.id, this.options[i].children[j].brands == this.brand.id);
          // if(this.options[i].children[j].brands && this.options[i].children[j].brands == this.brand.id) {
          // console.log(this.options[i].children[j]);
          if (this.options[i].children[j].brands) {
            if (this.options[i].children[j].brands == this.brand.id || this.options[i].children[j].brands == '308') {
              optionList.push(this.$t("language") == "zh" ? this.options[i].children[j].brandName : this
                  .options[i].children[j].brandEngName ? this.options[i].children[j].brandEngName :
                  this.options[i].children[j].brandName);
              idItemList.push(String(this.options[i].children[j].id));
              continue;
            }
            continue
          }

          // if(this.options[i].children[j].brands) {
          // 	continue;
          // }
          optionList.push(this.$t("language") == "zh" ? this.options[i].children[j].brandName : this.options[
              i].children[j].brandEngName ? this.options[i].children[j].brandEngName : this.options[
              i].children[j].brandName);
          idItemList.push(String(this.options[i].children[j].id));
        }
        // console.log(optionList, i);
        // optionList = optionList.filter(item => item.brands == '' || item.brands == null || item.brands == this.brand.id)
        // console.log(optionList,"李思源");
        this.$set(this.options[i], 'optionsList', [optionList])
        this.$set(this.options[i], 'idItemList', idItemList)
        this.$set(this.options[i], 'show', false)
        this.$set(this.options[i], 'selName', this.$t("goodsReleased.hint.selName"))
        // console.log(this.options[i]);
      }
      if (delIndex) {
        this.options.splice(delIndex, 1);
      }
      // this.options = this.options.filter(item => item.brands == '' || item.brands == null  || item.brands == this.brand.id)
    },
    reSelectSort() {
      this.selectAcc.name = "";
      this.selectAcc.isSelect = true;
      this.queryParams.classificationId = this.queryParams.classificationId.split(",")[0]
    },
    selectShow(index) {
      this.options[index].show = true;
      // console.log(index, this.options[index]);
    },
    // 初始化地区接口
    async initRegions() {
      const res = await getRegionsNew();
      console.log(res);
      const tempIndex = res.findIndex(item => item.brandEngName == "region");
      res[tempIndex].children.forEach(item => {
        if (this.$t("language") == "zh") {
          this.regionList[0].push(item.brandName);
        } else {
          this.regionList[0].push(item.brandEngName);
        }
        // this.regionList[0].push(item.brandEngName);
        this.regionIdList.push(item.id);
      });
    },
    confirmRegions(e) {
      this.regionName = e.value[0]
      this.rShow = false;
      console.log(this.queryParams);
      this.regionId = this.regionIdList[e.indexs[0]];
    },
    selectRegions() {
      this.rShow = true;
    },
    //获取时间区间年份
    getYearBetween(start) {
      var result = [];
      //使用传入参数的时间
      var startTime = new Date(start);
      console.log(startTime)
      var endTime = new Date();
      while (endTime - startTime >= 0) {
        //获取年份
        let year = startTime.getFullYear();
        //加入数组
        result.push(year);
        //更新日期
        startTime.setFullYear(startTime.getFullYear() + 1);
      }
      this.yearList[0] = result.reverse();
      this.yearList[0].push('NIL')
    },
    // 确认年份
    confirmYear(e) {
      this.yearName = e.value[0];
      this.Yshow = false;
    }
  },
  onShow() {
    this.getYearBetween(316577887000);
  },
  onLoad(options) {

    // this.initFreight();
    this.initRegions();
    if (options.wish) {
      this.wish = options.wish;
    }
    if (options.item) {
      this.brand = JSON.parse(decodeURIComponent(options.item));
      this.queryParams.commodity = JSON.parse(decodeURIComponent(options.goodsName));
      this.queryParams.commodityEn = JSON.parse(decodeURIComponent(options.commodityEn));
      // console.log(this.brand);
      this.queryParams.classificationId = this.brand.id;
      // console.log(this.queryParams);
      this.getCategory();
    }
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("goodsReleased.title")
    });
  }
}
</script>

<style lang="scss" scoped>
::v-deep .add-wrap {
  display: none;
}

.pop-desc {
  background-color: #fff;
  color: #858585;
  font-size: 40rpx;
  width: 400rpx;
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
  border-radius: 20rpx;
}

.u-radio-group {
  margin-top: 18rpx;
  justify-content: space-around;
}

.temp-class {
  margin-top: 14rpx;
}

.pop-img {
  width: 500rpx;
  height: 500rpx
}

.goods-name-ipt {
  position: relative;

  .goods-name-sty {
    margin-top: 20rpx;
    background: #FFFFFF;
    border: 1px solid rgba(128, 128, 128, 0.1);
    border-radius: 10px;
    height: 98rpx;
    padding-left: 30rpx;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 25rpx;
    text-align: center;
    color: #000;
  }

  .name {
    color: #858585;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
  }
}

.date-options {
  margin-top: 14rpx;

  .date-name {
    color: #858585;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
  }

  .date-sel {
    margin-top: 20rpx;
    // width: 100%;
    height: 98rpx;
    background: #FFFFFF;
    border: 1px solid rgba(128, 128, 128, 0.1);
    border-radius: 10px;
    text-align: center;
    line-height: 98rpx;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
  }

  .wdate-sel {
    margin-top: 20rpx;
    // width: 100%;
    height: 98rpx;
    background: #FFFFFF;
    color: #858585;
    border: 1px solid rgba(128, 128, 128, 0.1);
    border-radius: 10px;
    text-align: center;
    line-height: 98rpx;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
  }
}

.u-checkbox-group {
  margin-top: 20rpx;
  flex-wrap: wrap;
  justify-content: space-between;
}

.u-checkbox {
  height: 60rpx;
}

.u-checkbox__icon-wrap--square {
  margin-left: 20rpx !important;
}

.select-brand {
  margin-top: 20rpx;
  // width: 100%;
  height: 98rpx;
  background: #FFFFFF;
  border: 1px solid rgba(128, 128, 128, 0.1);
  border-radius: 10px;
  text-align: center;
  line-height: 98rpx;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
}

.wselect-brand {
  margin-top: 20rpx;
  // width: 100%;
  height: 98rpx;
  background: #FFFFFF;
  color: #858585;
  border: 1px solid rgba(128, 128, 128, 0.1);
  border-radius: 10px;
  text-align: center;
  line-height: 98rpx;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
}

.footer-btn {
  position: fixed;
  left: 50rpx;
  bottom: 0;
  right: 50rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  // background-color: #FBFBFB;

  .common-btn {
    width: 100%;
    height: 88rpx;
    border-radius: 10px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    line-height: 88rpx;
    margin-bottom: 26rpx;
    margin-top: 30rpx;
  }

  .cancel-btn {
    background: #F1F1F1;
    color: #858585;
  }

  .release-btn {
    background: #000000;
    color: #fff;
  }
}

.img-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: #FBFBFB;

  .img-item {
    position: relative;

    image {
      height: 386rpx;
      margin: 20rpx 0;
    }

    .del {
      position: absolute;
      right: 10rpx;
      top: 30rpx;
    }
  }
}

.u-upload {
  margin-top: 24rpx;
  background-color: #FBFBFB;
  width: 100%;
  position: relative;
}

.upload-img {
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  color: #858585;
  height: 88rpx;
  width: 100%;
  line-height: 88rpx;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid rgba(128, 128, 128, 0.1);
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 200rpx;
}

.upload-img2 {
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  color: #858585;
  height: 88rpx;
  width: 100%;
  line-height: 88rpx;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid rgba(128, 128, 128, 0.1);
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.active {
  margin-top: 102rpx !important;
}

.goodsReleased-view {
  // position: absolute;
  // width: 100%;
  // // height: 100%;
  // // top: 50rpx;
  // top: 0;
  // bottom: 0;
  // background-color: #FBFBFB;
  // z-index: -1;
  padding: 20rpx 50rpx;
  box-sizing: border-box;
  padding-bottom: 260rpx;

  .goods-name {
    margin-top: 14rpx;

    .name {
      color: #858585;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
    }

    input {
      margin-top: 20rpx;
      background: #FFFFFF;
      border: 1px solid rgba(128, 128, 128, 0.1);
      border-radius: 10px;
      height: 98rpx;
      padding-left: 30rpx;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
    }
  }

  .goods-price {
    margin-top: 14rpx;
    position: relative;

    .name {
      color: #858585;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
    }

    .goods-price-sty {
      margin-top: 20rpx;
      background: #FFFFFF;
      border: 1px solid rgba(128, 128, 128, 0.1);
      border-radius: 10px;
      height: 98rpx;
      padding-left: 30rpx;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 15px;
      text-align: center;
      color: #FF0000;
    }

    .sym {
      position: absolute;
      top: 53%;
      left: 60rpx;
      color: #858585;
    }
  }

  .options-list {
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;

    .options {
      margin-top: 14rpx;

      .name {
        color: #858585;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        display: flex;
        align-items: center;

        .name-title {
          margin-right: 10rpx;
        }
      }

      .sel {
        margin-top: 20rpx;
        // width: 100%;
        height: 98rpx;
        background: #FFFFFF;
        border: 1px solid rgba(128, 128, 128, 0.1);
        border-radius: 10px;
        text-align: center;
        line-height: 98rpx;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
      }

      .wsel {
        margin-top: 20rpx;
        // width: 100%;
        height: 98rpx;
        background: #FFFFFF;
        color: #858585;
        border: 1px solid rgba(128, 128, 128, 0.1);
        border-radius: 10px;
        text-align: center;
        line-height: 98rpx;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
      }
    }
  }
}

.goods-desc {
  textarea {
    background: #FFFFFF;
    border: 1px solid rgba(128, 128, 128, 0.1);
    border-radius: 10px;
    padding-top: 26rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    margin-top: 22rpx;
    width: 100%;
    box-sizing: border-box;
  }
}

.sort-desc {
  // margin: 30rpx 0;
  margin-top: 30rpx;

  .name {
    color: #858585;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
  }
}

.sort-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  // margin-top: 20rpx;
  // overflow: hidden;
  justify-content: space-between;
  // padding: 0 30rpx;

  .sort-item {
    margin: 0 15rpx;
    // margin-top: 20rpx;
    image {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
    }

    .img-desc {
      border-radius: 20rpx;
      background-color: #fff;
      box-shadow: 0rpx 0rpx 16rpx 0rpx #00000019;
      margin-top: 14rpx;
      padding: 25rpx 30rpx;
      text-align: center;
      font-size: 24rpx;
      color: #858585;
    }
  }
}

.select-acc {
  margin-top: 20rpx;
  // width: 100%;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 100, .2);
  height: 98rpx;
  background: #FFFFFF;
  border: 1px solid rgba(128, 128, 128, 0.1);
  border-radius: 10px;
  text-align: center;
  line-height: 98rpx;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
}

.size {
  margin-top: 14rpx;

  .ipt-size {
    margin-top: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
  }

  .name {
    color: #858585;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
  }

  input {
    margin-top: 10rpx;
    // width: 100%;
    height: 98rpx;
    background: #FFFFFF;
    border: 1px solid rgba(128, 128, 128, 0.1);
    border-radius: 10px;
    text-align: center;
    line-height: 98rpx;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    width: 150rpx;
  }
}
</style>
